<template>
    <v-list-item three-line :to="`/blog-content/` + id">
        <!-- 博客：标题、简介、作者（头像、昵称）、发布时间、浏览量、点赞量、评论量 -->
        <v-list-item-content>
            <!-- 标题 -->
            <v-list-item-title class="font-weight-black">{{title}}</v-list-item-title>
            <!-- 简介 -->
            <v-list-item-subtitle>{{desc}}</v-list-item-subtitle>
            <!-- 作者（头像、昵称）、发布时间、浏览量、点赞量、评论量 -->
            <v-list-item-subtitle class="text-caption">
                <!-- 头像 -->
                <v-avatar size="30" class="mr-3">
                    <v-img :src="headPic"/>
                </v-avatar>
                <!-- 昵称 -->
                <span class="mr-6">{{nickname}}</span>
                <!-- 发布时间 -->
                <span class="mr-6">{{time}}</span>
                <!-- 浏览量 -->
                <div class="d-inline-block mr-6">
                    <v-icon size="18" class="mr-1">mdi-eye</v-icon>
                    {{eye | numFormat}}
                </div>
                <!-- 点赞量 -->
                <div class="d-inline-block mr-6 red--text">
                    <v-icon size="18" class="mr-1" color="red">mdi-thumb-up</v-icon>
                    {{like | numFormat}}
                </div>
                <!-- 评论量 -->
                <div class="d-inline-block blue--text">
                    <v-icon size="18" class="mr-1" color="blue">mdi-message-text</v-icon>
                    {{comment | numFormat}}
                </div>
            </v-list-item-subtitle>
        </v-list-item-content>
        <!-- 博客的封面 -->
        <v-list-item-avatar tile width="160" height="100" class="rounded-lg">
            <v-img :src="cover"></v-img>
        </v-list-item-avatar>
    </v-list-item>
</template>

<script>
    export default {
        name: "BlogCard",
        props: {
            id: {type: Number, required: true}, // 编号（数字，必填）
            title: {type: String, required: true},// 标题（文本，必填）
            desc: {type: String, default: ''},// 简介（文本，默认值空字符）
            time: {type: String, required: true},// 发布时间（文本，必填）
            eye: {type: Number, default: 0},// 浏览量（数值，默认值0）
            like: {type: Number, default: 0},// 点赞量（数值，默认值0）
            comment: {type: Number, default: 0},// 评论量（数值，默认值0）
            cover: {type: String, required: true},// 博客封面（文本，必填）
            nickname: {type: String, required: true},// 作者昵称（文本，必填）
            headPic: {type: String, required: true},// 作者头像（文本，必填）
            to: {type: String},// 跳转的目标路由（文本）
        }
    }
</script>

<style scoped>

</style>